// component/modal/mask/mask.js
Component({
    /**
     * 组件的属性列表
     */
    properties: {
        visible: {
            type: Boolean,
            value: false,
        }
    },

    observers: {
        'visible': function (nVal, oVal) {
            if (this.animation) {
                nVal ? this.showMask() : this.hideMask();
            }
        }
    },

    /**
     * 组件的初始数据
     */
    data: {},

    ready() {
        this.animation = wx.createAnimation();
        this.setData({
            animation: this.animation.export()
        });

        if (this.data.visible) {
            this.showMask();
        }
    },

    /**
     * 组件的方法列表
     */
    methods: {
        //展示遮罩层
        showMask() {
            this.animation.height('100%').step({duration: 1});
            this.animation.backgroundColor('rgba(0,0,0,0.6)').step({duration: 300, timingFunction: 'ease-in-out'});
            this.setData({
                animation: this.animation.export()
            });
        },

        //展示遮罩层
        hideMask() {
            this.animation.backgroundColor('rgba(0,0,0,0)').step({duration: 300, timingFunction: 'ease-in-out'});
            this.animation.height(0).step({duration: 0});
            this.setData({
                animation: this.animation.export()
            });
        },
    }
})
